<template>
  <div v-if="moduleShow" class="mg-target">
    <el-button v-if="barrel.tag" size="small" icon="el-icon-check" @click="barrel.button = true">{{ barrel.val }}</el-button>
    <el-button v-else class="button-new-tag" size="small" @click="barrel.button = true">+ 分桶组</el-button>
    <el-button v-if="modular.tag" size="small" icon="el-icon-check" @click="modular.button = true">{{ modular.val }}</el-button>
    <el-button v-else class="button-new-tag" size="small" @click="modular.button = true">+ 页面模块</el-button>
    <el-button size="small" type="danger" icon="el-icon-delete" @click="delThis"/>

    <el-dialog :visible.sync="barrel.button" append-to-body width="40%">
      <el-form ref="form" :model="form" label-width="120px" style="width:90%;" >
        <el-form-item label="所属端">
          <el-input v-model="form.app" disabled/>
        </el-form-item>
        <el-form-item label="模块标识">
          <el-input v-model="form.barrel.code"/>
        </el-form-item>
        <el-form-item label="模块名称">
          <el-input v-model="form.barrel.name"/>
        </el-form-item>
        <el-form-item label="模块版本">
          <el-input v-model="form.barrel.version"/>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.barrel.desc" type="textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="barrel.button = false">取 消</el-button>
        <el-button type="primary" @click="handleBarrel">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="modular.button" append-to-body>
      <el-form ref="form" :model="form" label-width="120px" style="width: 100%;">
        <el-form-item label="所属端">
          <el-select v-model="form.app" disabled placeholder="PCWEB">
            <el-option v-for="item in form.barrel.options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="选择页面">
          <el-tag v-for="tag in form.modular.dynamicTags" :key="tag" :disable-transitions="false" closable @close="handleClose(tag)"> {{ tag }}</el-tag>
          <el-button class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
          <el-input v-if="form.modular.inputVisible" ref="saveTagInput" v-model="form.modular.inputValue" size="small" class="input-new-tag" @blur="handleInputConfirm"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modular.button = false">取 消</el-button>
        <el-button type="primary" @click="handleModular">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="form.modular.inputVisible" append-to-body>
      <el-form ref="form.form" :model="form.form" label-width="120px" style="width: 100%;">
        <el-form-item label="所属端">
          <el-select v-model="form.form.app" disabled placeholder="">
            <el-option v-for="item in form.barrel.options" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="页面名称">
          <el-select v-model="form.form.name" placeholder="请选择">
            <el-option v-for="item in form.form.name" :key="item.code" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="模块标识">
          <el-input v-model="form.barrel.code" style="width: 80%;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modular.button = false">取 消</el-button>
        <el-button type="primary" @click="handlePage">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      moduleShow: true,
      barrel: {
        tag: false,
        button: false,
        list: [],
        val: '分桶已选'
      },
      modular: {
        tag: false,
        button: false,
        list: [],
        val: '模块已选'
      },
      form: {
        app: 'PCWEB',
        barrel: {
          options: [],
          title: '',
          value: '',
          code: '',
          decs: '',
          version: ''
        },
        modular: {
          dynamicTags: ['精选频道页', '点播页'],
          inputVisible: false,
          inputValue: ''
        },
        form: {
          options: [],
          name: [{
            label: '个人中心',
            code: 'ch_member'
          }, {
            label: '播放底层',
            code: 'play'
          }]
        }
      }
    }
  },
  methods: {
    handleBarrel() {
      this.barrel.button = false
      this.barrel.tag = true
    },
    handleModular() {
      this.modular.button = false
      this.modular.tag = true
    },
    delThis() {
      this.moduleShow = false
    },
    handlePage() {
      this.form.modular.inputVisible = false
      const inputValue = this.form.form.inputValue = this.form.modular.inputValue
      if (inputValue) {
        this.form.modular.dynamicTags.push(inputValue)
      }
      this.form.modular.inputVisible = false
      this.form.modular.inputValue = ''
    },
    handleClose(tag) {
      this.form.modular.dynamicTags.splice(this.form.modular.dynamicTags.indexOf(tag), 1)
    },
    showInput() {
      this.form.modular.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.board {
  margin-left: 20px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: flex-start;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  opacity: 0;
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

</style>
